<template>
    <!-- vue-fragmen作用于根组件，不会被渲染 -->
    <vue-fragment>
        <template v-for="(item, index) in menuList">

            <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
             情况一：有子集的情况：                         -->
            <el-submenu :key="index" :index="item.id + ''" v-if="item.children.length > 0">
                <template slot="title">
                    <i :class=item.icon style="margin-right: 5px;"></i>
                    <span>{{ item.authName }}</span>
                </template>
                <ElmenuSub :menuList="item.children" v-on="$listeners"></ElmenuSub>
            </el-submenu>

            <!-- 情况二：没子集的情况： -->
            <el-menu-item :key="index" v-else :index="item.path + ''" @click="savaNavState(item)">
                <i :class="item.icon" style="margin-right: 5px;"></i>
                <span slot="title">{{ item.authName }}</span>
            </el-menu-item>
        </template>
    </vue-fragment>
</template>


<script>
import { mapMutations, mapState } from 'vuex'
export default {
    name: "ElmenuSub",
    props: {
        menuList: {
            type: Array,
            default: () => { [] }
        },
    },
    data() {
        return {

        }
    },
    computed: {

    },
    methods: {
        ...mapMutations('tagViewPath', ['updateTagViewPath']),
        //保存当前路径到会话当中,作用避免刷新后无法高亮显示对应的按钮
        savaNavState(item) {
            this.updateTagViewPath(item)
        }
    },

    // 注意： 在template标签上使用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环错误
};
</script>
<style scoped>
/* 一级 定义导航菜单悬浮时的文字颜色 */
.el-submenu__title:hover .iconfont,
.el-submenu__title:hover span {
    color: #1890FF !important;
    /* 使用 !important 提高样式优先级 */
}

/* 二级 定义导航菜单激活时的背景颜色 */
.el-menu-item.is-active {
    background-color: #1890FF !important;
}

/* 二级 定义导航菜单悬未激活时悬浮的文字颜色 */
.el-menu-item:hover .iconfont,
.el-menu-item:hover {
    color: #1890FF !important;
    /* 使用 !important 提高样式优先级 */
}

/* 二级 定义导航菜单已激活时悬浮的文字颜色 */
.el-menu-item.is-active:hover .iconfont,
.el-menu-item.is-active:hover {
    color: #fff !important;
}
</style>